<template>
  <div class="index-wrapper" v-if="data && data.length > 0">
    <div class="goods-list">
        <div class="container-body">
          <div class="body-container"
               style="--spacing: 16px; --goods-border-radius: 4px; --goods-image-style: contain; --lines: 0;"
          >
            <div class="body-container-swiper"></div>
            <div class="body-container-grid">
              <div v-for="(item,index) in data" :key="item.noteId" class="goods-item no-border-white"
                   style="flex-direction: column; --title-align: left; --flex-align: flex-start;"
              >
                <div class="goods-item-img-container">
                  <div class="image-box item-module-img" style="padding-top:56.25%;width:100%;">
                    <nuxt-link :to="item.showFlag==1?'/note/detail/'+item.noteId:'javascript:void(0);'" class="flex align-center" :title="item.title" :alt="item.title">
                      <img v-lazy="item.img" class="goods-img top-image">
                      <div class="item-shade">
                        <div class="collet-btn" v-if="item.pushFlag==1">推荐</div>
                        <div class="collet-btn" v-if="item.newFlag==1">新课</div>
                        <div class="collet-btn" v-if="item.hotFlag==1">热课</div>
                        <div v-if="!buy">
                          <div class="collet-btn" v-if="item.tryLink==1">可试学</div>
                        </div>
                        <div class="collet-btn" v-if="item.ntype==1">手册</div>
                        <div class="collet-btn" v-if="item.ntype==2">视频</div>
                        <span class="collet-btn" v-if="item.notetype==1">基础课</span>
                        <span class="collet-btn" v-if="item.notetype==2">进阶课</span>
                        <span class="collet-btn" v-if="item.notetype==3">实战课程</span>
                        <span class="collet-btn" v-if="item.notetype==4">面试课</span>
                      </div>
                      <div class="type-label-box">
                        <div class="type-label">
                          {{item.categoryName}}
                        </div>
                      </div>
                      <div class="type-label-box-left" v-if="item.showFlag==1">
                        <div class="type-label cof fw"  v-if="item.finished">更新完毕</div>
                        <div class="type-label yellow fw" v-else>{{(formatTimeToStr(item.updateTime,'yyyy-MM-dd') == formatTimeToStr(new Date(),'yyyy-MM-dd'))?'今日有更新':'持续更新中'}}</div>
                      </div>
                      <div class="type-label-box-left" v-if="item.showFlag==0">
                        <div class="type-label yellow fw">课程尚未开始</div>
                      </div>
                      <div class="mook" v-if="show">
                        <div
                            class="shadow"
                            :style="`background: conic-gradient(#e24329 ${item.percent}%, gray ${item.percent}%)`"
                        ></div>
                        <div class="num">{{item.percent || 0}}%</div>
                      </div>
                    </nuxt-link>
                  </div>
                </div>
                <div class="goods-card-container-info goods-card-container-vertical">
                  <div class="content-box">
                    <div class="title-box " style="font-weight:600;">
                      <nuxt-link :to="item.showFlag==1?'/note/detail/'+item.noteId:'javascript:void(0);'" class="two-line-hidden title" :title="item.title" :alt="item.title">{{item.title}}</nuxt-link>
                    </div>
                    <div class="title-box ET5 EC14  c999">
                      <nuxt-link :to="item.showFlag==1?'/note/detail/'+item.noteId:'javascript:void(0);'" class="two-line-hidden fz13 " :title="item.description" :alt="item.title">{{item.description || "暂无"}}</nuxt-link>
                    </div>
                  </div>
                  <div class="social-btn-group mt5">
                    <nuxt-link :to="item.showFlag==1?'/note/detail/'+item.noteId:'javascript:void(0);'" class="flex align-center" :title="item.title" :alt="item.title">
                      <span class="pr tp3 fz14 fb spanboxcc flex1">
                        <span class="praise social-btn ml3">
                          <span class="iconfont icon-eye">
                          </span>
                          <span class="count">
                            {{item.viewcount||0}}
                          </span>
                        </span>
                        <span class="like social-btn ml5">
                          <span class="iconfont icon-shoucang">
                          </span>
                          <span class="count">
                            {{item.favNum||0}}
                          </span>
                        </span>
                        <span class="like social-btn ml5" v-if="item.stimer">
                          <span class="iconfont icon-describe">
                          </span>
                          <span class="count">
                            {{item.stimer}}
                          </span>
                        </span>
                      </span>
                    </nuxt-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>
<script setup>
defineProps({
  buy:{
    type:Boolean,
    default:false
  },
  data:{
    type:Array,
    default:[]
  },
  url:{
    type:String,
    default:"/note"
  },
  show:{
    type:Boolean,
    default:false
  }
})
</script>
<style scoped lang="scss">
.index .load-more-tip img{position:relative;top:4px;width:22px;animation:rotate-72db9d12 1.5s linear infinite}
@keyframes rotate-72db9d12{0%{transform:rotate(0deg)}
  50%{transform:rotate(180deg)}
  to{transform:rotate(1turn)}
}
.holder-block .holder-block-banner{height:432px}
.holder-block .holder-block-type-wrap{margin:24px 0 0}
.holder-block .holder-block-type-wrap .holder-block-type-item{display:inline-block;width:282px;height:120px}
.holder-block .holder-block-type-wrap .holder-block-type-item + .holder-block-type-item{margin-left:24px}
.holder-block .holder-block-hot{margin:48px 0 0}
.holder-block .holder-block-hot .holder-block-hot-title{width:100px;height:33px;margin:0}
.holder-block .holder-block-hot .holder-block-hot-list{margin:24px 0 0}
.holder-block .holder-block-hot .holder-block-hot-item{display:inline-block;width:220px;height:256px}
.holder-block .holder-block-hot .holder-block-hot-item + .holder-block-hot-item{margin-left:24px}
.goods-list .goods-content{display:flex;overflow:hidden;position:relative;align-items:center;margin-top:-20px;padding-top:20px}
.goods-list .goods-content .slide-area-box{display:flex}
.goods-list .goods-content .list-container{display:flex;transition:transform .6s cubic-bezier(.33,1,.68,1)}
.goods-list .goods-content .left,.goods-list .goods-content .right{position:absolute;z-index:10;width:40px;height:40px;background:rgba(0,0,0,.4);display:none;border-radius:50%;line-height:40px;text-align:center;cursor:pointer}
.goods-list .goods-content .left .arrow,.goods-list .goods-content .right .arrow{color:#fff;width:40px;height:40px}
.goods-list .goods-content .left{left:24px;transform:rotate(180deg)}
.goods-list .goods-content .arrow-left{transform:rotate(-180deg)}
.goods-list .goods-content .right{right:24px}
.goods-list .goods-content .left:hover,.goods-list .goods-content .right:hover{background:rgba(0,0,0,.6)}
.goods-list .slide-area::-webkit-scrollbar{display:none}
.body-container-grid{grid-template-rows:repeat(0,1fr);grid-template-columns:repeat(5,1fr);}
.body-container-grid .goods-item{overflow:hidden;width:auto !important}
.priceBox .body-container-grid .bottom_info:first-child .newStyle,.priceBox .slide-area .bottom_info:first-child .newStyle{height:18px}
.priceBox .body-container-grid .bottom_info .newStyle,.priceBox .slide-area .bottom_info .newStyle{height:30px}
.linePriceBox .body-container-grid .bottom_info:first-child .newStyle,.linePriceBox .slide-area .bottom_info:first-child .newStyle{height:12px}
.linePriceBox .body-container-grid .bottom_info .newStyle,.linePriceBox .slide-area .bottom_info .newStyle{height:24px}
.infoBox.linePriceBox .body-container-grid .bottom_info .newStyle,.infoBox.linePriceBox .slide-area .bottom_info .newStyle{height:20px}
.infoBox.priceBox .body-container-grid .bottom_info .newStyle,.infoBox.priceBox .slide-area .bottom_info .newStyle{height:26px}
.infoBox .body-container-grid .bottom_info:first-child .newStyle:first-child,.infoBox .slide-area .bottom_info:first-child .newStyle:first-child{margin-top:16px}
.infoBox .body-container-grid .bottom_info .newStyle:first-child,.infoBox .slide-area .bottom_info .newStyle:first-child{margin-top:28px}
.title-box{font-size:14px;line-height:20px;color:#333;font-family:PingFang SC;white-space:normal;word-break:break-all;margin-bottom:4px}
.title-big-mode,.title-box{font-size:16px;line-height:24px}
.description-box{color:#999;font-size:12px;font-weight:400;font-family:PingFang SC;line-height:16px;white-space:normal;word-break:break-all}
.one-line-hidden{white-space:nowrap !important}
.one-line-hidden,.two-line-hidden{overflow:hidden;text-overflow:ellipsis}
.two-line-hidden{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.card-projection,.no-border-white{background-color:#fff}
.card-projection{box-shadow:0 4px 8px 0 rgba(0,0,0,.04)}
.border-white{border:1px solid #e5e5e5;background-color:#fff}
.no-border-transparent{background-color:transparent !important}
.no-margin{margin-bottom:0 !important}
.MT-4{margin-top:4px}
.marketing-info-prices_dis{height:16px !important;line-height:16px !important}
.alive-card-container{display:flex;flex-direction:column;background-color:#fff;border-radius:var(--goods-border-radius);overflow:hidden;width:330px;cursor:pointer;transition:transform .3s ease-in-out}
.alive-card-container:hover{box-shadow:0 4px 10px 0 rgba(51,51,51,.04);transform:translate3d(0,-8px,0)}
.alive-card-container-image{display:flex;flex-direction:column;justify-content:center}
.alive-card-container-image .image-box{width:100%;position:relative;padding-top:32%}
.alive-card-container-image .image-box .default-img-goods,.alive-card-container-image .image-box img{position:absolute;top:0;left:0;width:100%;height:100%}
.alive-card-container-image .image-box .default-img-goods{background:#f1f3f7}
.alive-card-container-info{display:flex;flex:1;flex-direction:column;justify-content:space-between;box-sizing:border-box;padding:8px 12px 16px;overflow:hidden}
.alive-card-container-info .content-box{text-align:var(--title-align) !important}
.alive-card-container-info .title-box{color:#333;font-size:14px;line-height:24px}
.alive-card-container .alive-type-box{align-items:var(--title-align) !important;display:flex;flex-direction:column-reverse}
.alive-card-container .alive-type-box.MT-8 .newStyle{margin-top:8px}
.alive-card-container .alive-type-box.MT-8 .newStyle:first-child{margin-top:0}
.alive-card-container .alive-type-box .alive-info{display:flex;justify-content:space-between;align-items:center;flex-grow:0}
.alive-card-container .alive-type-box .alive-info.center-info{flex-direction:column}
.alive-card-container .alive-type-box .alive-info.center-info .MB-8{margin-bottom:8px}
.alive-card-container .alive-type-box .alive-time-box{text-align:var(--title-align) !important}
.alive-card-container .alive-type-box .alive-time-box .alive-time-text{height:16px;border-radius:2px;background:rgba(20,114,255,.08);display:flex;align-items:center;padding:0 4px;color:#1472ff;font-size:12px;font-weight:600;font-family:PingFang SC;white-space:nowrap}
.alive-card-container .alive-type-box .alive-type-show-box .alive-type-img-box{display:flex;align-items:center;height:32px;color:#fff;font-size:14px;font-family:PingFang SC;padding:0 16px;background-color:#1472ff;border-radius:4px;white-space:nowrap}
.alive-card-container .alive-type-box .alive-type-show-box .alive-type-img-box .alive-type-show-icon{margin-right:4px}
.components-container{display:flex;flex-direction:column;box-sizing:border-box;background-color:transparent}
.components-container .container-header{box-sizing:border-box;padding:var(--vertical_margin) var(--transverse_margin) 0}
.components-container .container-body{box-sizing:border-box;padding:0 var(--transverse_margin) var(--vertical_margin)}
.components-container .container-body::-webkit-scrollbar{display:none}
.body-container .body-container-grid{display:grid;justify-content:center;justify-items:stretch;align-items:stretch;grid-gap:var(--spacing)}
.body-container-slider{white-space:nowrap}
.body-container-slider .list-container:only-child:nth-child(n) >:not(:last-child){margin-right:var(--spacing)}
.item-market{display:flex;flex-direction:row;align-items:flex-end;height:20px}
.item-market .item-market-free{font-weight:600;font-size:16px;color:#333}
.item-market .item-market-solded{font-size:12px;color:#888}
.item-market > .marketing-info-prices_org{color:#333;font-size:14px;font-weight:700;position:relative;padding-left:8px;height:18px;line-height:18px;color:#ff5024}
.item-market > .marketing-info-prices_org:before{content:"￥";position:absolute;left:-2px;bottom:0;font-size:12px}
.item-market .marketing-info-prices_dis{position:relative;padding-left:8px;height:16px;line-height:16px;font-size:12px;color:#b2b2b2;margin-left:4px;text-decoration:line-through}
.item-market .marketing-info-prices_dis:before{content:"￥";position:absolute;left:-2px;bottom:0;font-size:12px}
.item-market .margin-l-0{margin-left:0}
.item-market .price-free{color:#ff5024}
.newStyle{font-family:PingFang SC;height:auto}
.newStyle .item-market-free{font-size:18px;line-height:18px}
.newStyle .marketing-info-prices_org{font-size:14px;line-height:18px;padding-left:9px}
.newStyle .marketing-info-prices_org:before{font-size:14px;left:-3px;bottom:-1px}
.newStyle .marketing-info-prices_dis{font-size:12px;line-height:12px;height:12px;color:#b2b2b2}
.newStyle .marketing-info-prices_dis:before{font-size:12px;bottom:0}
.title-box{font-size:14px;line-height:20px;color:#333;font-family:PingFang SC;white-space:normal;word-break:break-all;margin-bottom:4px}
.title-big-mode,.title-box{font-size:14px;line-height:24px}
.description-box{color:#999;font-size:12px;font-weight:400;font-family:PingFang SC;line-height:16px;white-space:normal;word-break:break-all}
.one-line-hidden{white-space:nowrap !important}
.one-line-hidden,.two-line-hidden{overflow:hidden;text-overflow:ellipsis}
.two-line-hidden{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.card-projection,.no-border-white{background-color:#fff}
.card-projection{box-shadow:0 4px 8px 0 rgba(0,0,0,.04)}
.border-white{border:1px solid #e5e5e5;background-color:#fff}
.no-border-transparent{background-color:transparent !important}
.no-margin{margin-bottom:0 !important}
.MT-4{margin-top:4px}
.goods-item{display:flex;flex-direction:column;position:relative;border-radius:var(--goods-border-radius);overflow:hidden;cursor:pointer;transition:transform .3s ease-in-out;box-shadow:0 4px 10px 0 rgba(51,51,51,.09);border-radius: 10px;}
.goods-item:hover{box-shadow:0 4px 10px 0 rgba(51,51,51,.08);transform:translate3d(0,-8px,0)}
.goods-item .goods-item-img-container{display:flex;flex-direction:column;justify-content:center}
.goods-item .goods-item-img-container .image-box{position:relative}
.goods-item .goods-item-img-container .image-box .middle-sty{height:100%;width:100%;top:0;position:absolute;margin:0 auto;padding:1em;background:hsla(0,0%,100%,.25) border-box;overflow:hidden;text-shadow:0 1px 1px hsla(0,0%,100%,.3);-webkit-user-select:none;-moz-user-select:none;user-select:none}
.goods-item .goods-item-img-container .image-box .middle-sty:before{background:var(--back-ground);background-repeat:no-repeat;background-size:cover;content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:-30px;z-index:1;filter:blur(20px)}
.goods-item .goods-item-img-container .image-box .top-image{position:absolute;left:0;z-index:2;top:0;-o-object-fit:cover;object-fit:cover}
.goods-item .goods-item-img-container .image-box .default-img-goods,.goods-item .goods-item-img-container .image-box img{-o-object-fit:cover;object-fit:cover;position:absolute;top:0;left:0;width:100%;height:100%}
.goods-item .goods-item-img-container .image-box .default-img-goods{left:50%;top:50%;transform:translate(-50%);width:42px;height:36px}
.goods-item .goods-item-img-container .image-box .goods-img{-o-object-fit:cover;object-fit:cover;}
.goods-item .goods-item-img-container .image-box .type-label-box{position:absolute;bottom:6px;right:6px;border-radius:2px;padding:0 5px;box-sizing:border-box;height:18px;line-height:18px;background:rgba(0,0,0,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:3}
.goods-item .goods-item-img-container .image-box .type-label-box-left{position:absolute;bottom:6px;left:6px;border-radius:2px;padding:0 5px;box-sizing:border-box;height:18px;line-height:18px;background:rgba(0,0,0,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:3}
.goods-item .goods-item-img-container .image-box .type-label-box .type-label{color:#fff;font-size:12px;font-family:PingFang SC}
.goods-item .goods--item-default-img{width:40px;height:34px}
.goods-item .goods-card-container-info{padding:12px 12px 8px;position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box}
.goods-item .goods-card-container-info >:not(.bottom_info){text-align:var(--title-align) !important;justify-content:var(--flex-align)}
.goods-item .goods-card-container-info .item-type__learn{line-height:16px}
.goods-item .goods-card-container-info .item-type__learn .learn-count{font-size:12px;color:#999}
.goods-item .goods-card-container-crosswise{padding:8px 12px;overflow:hidden}
.goods-item .goods-card-container-crosswise .bottom_info,.goods-item .goods-card-container-crosswise .MT-12 .item-type__learn{margin-top:0}
.goods-item .goods-card-container-crosswise._3-in-row .title-box{font-size:14px;line-height:20px}
.goods-item .goods-card-container-crosswise._3-in-row .description-box{font-size:12px;line-height:16px}
.goods-item .goods-card-container-crosswise._3-in-row .newStyle.pc-new-price-item{height:22px !important}
.goods-item .goods-card-container-crosswise._3-in-row._16_9-ratio .title-box{margin-bottom:1px}
.goods-item .goods-card-container-crosswise._3-in-row._16_9-ratio .pc-new-price-item{height:23px !important}
.goods-item .goods-card-container-crosswise._3-in-row._16_9-ratio .item-type__learn{height:12px;line-height:12px}
.goods-item .goods-card-container-crosswise._3-in-row._3_2-ratio .pc-new-price-item{height:22px !important}
.bottom_info{display:flex;justify-content:flex-end;flex-direction:column;margin-top:12px}
.bottom_info > div{text-align:var(--title-align) !important;justify-content:var(--flex-align)}
.bottom_info .newStyle .marketing-info-prices_org + .marketing-info-prices_dis{margin-bottom:1px}
.MT-12 .item-type__learn{margin-top:16px}
.resource-type-type{position:absolute;top:10px;left:10px;padding:2px 4px;display:flex;justify-content:center;align-items:center;color:#fff;border-radius:2px;font-size:12px;z-index:9}
.exam_stateWait{background-color:#ffa114}
.exam_stateIng{background-color:#1472ff}
.exam_stateEnd{background-color:#a2acb0}
.item-type__info{margin-top:4px;text-align:var(--title-align) !important}
.item-type__info .info-count{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:18px;color:#999}
.item-type__info .info-count .line{display:inline-block;width:1px;height:10px;margin:0 4px;background-color:#ebebeb}
.item-info-user{margin-top:12px;display:flex}
.item-info-user .user_avatar{display:flex;position:relative}
.item-info-user .info-user_avatar{width:20px;height:20px;border-radius:50%;position:absolute}
.mook {
 width: 60px;
 height: 60px;
 line-height: 60px;
 background-color: rgba(119, 113, 102, 0.7);
 position: absolute;
 left:50%;
 top:50%;
 transform: translate(-50%,-50%);
 border-radius: 50%;
 z-index: 21;

 .shadow {
   width: 120px;
   height: 120px;
   position: absolute;
   border-radius: 50%;
   top: -28px;
   left: -28px;
   z-index: 21;
   mask: radial-gradient(transparent 44px, #000 45px);
   -webkit-mask: radial-gradient(transparent 44px, #000 45px);
   transform: scale(0.6);
 }

 .shadow::before {
   content: "";
   position: absolute;
   left: 48px;
   top: 0px;
   width: 5px;
   height: 5px;
   background: #ddff5c;
   border-radius: 50%;
   z-index: 21
 }

 .shadow::after {
   content: "";
   position: absolute;
   left: -1px;
   top: 44px;
   width: 8px;
   height: 8px;
   background: #85ea8e;
   border-radius: 50%;
   z-index: 21;
 }

 .num {
   width: 100%;
   color: #fff;
   font-size: 16px;
   text-align: center;
   font-weight: bold;
 }
}

.title{
  font-family: "HarmonyOSHans-Medium";
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 6px;
  font-weight: 600;
}
</style>
